<template>
  <div class="app-container calendar-list-container">
    <!-- 搜索工具栏 -->
    <section>
      <so-tool-bar :toolData="toolData" :query="listQuery" @search="search"/>
    </section>
    <!-- 查询和其他操作 -->
    <section class="filter-container">
      <el-row>
        <el-col :span="8">
          <el-button class="filter-item" type="primary" size="small" @click="upAndownPro(1)">上架</el-button>
          <el-button class="filter-item" type="primary" size="small" @click="upAndownPro(0)">下架</el-button>
          <el-button class="filter-item" type="primary" size="small" @click="topStatus(1)">置顶</el-button>
          <el-button class="filter-item" type="primary" size="small" @click="topStatus(0)">取消置顶</el-button>
        </el-col>
        <el-col :span="6" style="padding-top: 5px;">
          &nbsp;&nbsp;<span class="el-green">进行中&nbsp;<em>{{invote_count}}</em>&nbsp;个</span>
        </el-col>
        <el-col :span="10">
          <section style="float: right">
            <el-button class="filter-item" type="danger" size="small" @click="delRows">批量删除</el-button>
            <el-button class="filter-item" type="primary" size="small" @click="openForm('add')">创建投票</el-button>
          </section>
        </el-col>
      </el-row>
    </section>
    <!-- 数据展示 -->
    <el-table :data="tableList" v-loading="loading" element-loading-text="正在查询中。。。"
      stripe highlight-current-row @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column align="center" label="状态">
        <template slot-scope="scope">
          <el-tag size="mini" type="success" v-show="scope.row.close_status == 1">{{t_status[scope.row.close_status].label}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" width="30">
        <template slot-scope="scope">
          <i class="iconfont ali-zhiding" v-show="scope.row.top_status == 1"></i>
        </template>
      </el-table-column>
      <el-table-column align="center" label="活动标题" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="showCount(scope.row)">{{scope.row.vote_title}}</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" label="起止时间" width="170px">
        <template slot-scope="scope">
          <p v-show="scope.row.vote_type == 2">
            <span style="padding-right:10px;color:#67C23A">起</span>
            <span>{{ scope.row.vote_starttime }}</span>
          </p>
          <p v-show="scope.row.vote_type == 2">
            <span style="padding-right:10px;color:#67C23A">止</span>
            <span>{{ scope.row.vote_endtime }}</span>
          </p>
        </template>
      </el-table-column>
      <el-table-column align="center" label="参与数" >
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="Statistics(scope.row)">{{scope.row.partake_nums}}</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" label="浏览量" prop="browse_nums">
      </el-table-column>
      <el-table-column align="center" label="创建时间" prop="create_time">
      </el-table-column>
      <el-table-column align="center" label="列表链接">
        <template slot-scope="scope">
          <el-button
            v-clipboard:copy="'https://cloud.anyolife.com/VoteHome'"
            v-clipboard:success="onCopy"
            v-clipboard:error="onError"
            type="text"
          >复制链接</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" label="详情链接">
        <template slot-scope="scope">
          <el-button v-if="scope.row.vote_type==1"
            v-clipboard:copy="'https://cloud.anyolife.com/VoteTypeTwo' + '?id=' + scope.row.id"
            v-clipboard:success="onCopy"
            v-clipboard:error="onError"
            type="text"
          >复制链接</el-button>
          <el-button v-else
            v-clipboard:copy="'https://cloud.anyolife.com/VoteTypeThree' + '?id=' + scope.row.id"
            v-clipboard:success="onCopy"
            v-clipboard:error="onError"
            type="text"
          >复制链接</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <i class="iconfont ali-edit-2" @click="openForm('edit', scope.row)"></i>
          <i class="iconfont ali-bin" @click="delRow(scope.row)"></i>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <section>
      <so-pagination :query="listQuery" @initList="initList"/>
    </section>
    <!-- 新建/编辑 -->
    <section>
      <createTemp ref="tempForm" :isShow="isShow" @closeTemp="closeTemp" @initList="initList"></createTemp>
    </section>
  </div>
</template>

<script>
import { vote_list, vote_updateCloseStatus, vote_delete, vote_deleteAll, vote_updateTopStatus} from "@/api/vote";
import { searchTool } from "@/utils";
import create from './create'
import SoPagination from '@/components/SoPagination'
import SoToolBar from "@/components/SoToolBar";
import { t_status, toolData } from "./vote";

export default {
  name: "vote",
  components: { 'createTemp': create, SoPagination, SoToolBar},
  data() {
    return {
      toolData: toolData, //工具栏初始化
      loading: false,
      tableList: [],
      multipleSelection: [],
      listQuery: { start: 0, limit: 10, total: 0, current: 1 },
      t_status: t_status,
      invote_count: 0, //正在进行的数量
      isShow: false
    };
  },
  methods: {
    onCopy: function() {
      this.$message({
        type: "success",
        message: "复制成功"
      });
    },
    onError: function() {
      this.$message.error("复制失败");
    },
    showCount(e){//查看详情
      this.$router.push({path: '/other/voteCount', query: {id: e.id}})
    },
    Statistics(e){
      this.$router.push({path: '/other/voteStatistics', query: {id: e.id}})
    },
    async delRows(){//批量删除
      if (this.multipleSelection.length == 0) {
        this.$message.warning("请先选择需要调整单元");
        return;
      }
      const ids = this.multipleSelection.map(item => item.id).join();
      try {
        const res = await this.$confirm("确认删除吗？");
        if (res == "confirm") {
          this.loading = true;
          const { data } = await vote_deleteAll({array: ids});
          if (data.status == 100) {
            this.$message.success("删除成功");
          }
          this.initList();
        }
      } catch (error) {
        console.log(error, "error");
      }
    },
    async delRow(row) {//删除
      try {
        let res = await this.$confirm("确认删除吗？");
        if (res == "confirm") {
          this.loading = true;
          let { data } = await vote_delete(row);
          if (data.status == 100) {
            this.$message.success("删除成功");
          }
          this.initList();
          this.loading = false;
        }
      } catch (error) {
        console.log(error, "error");
      }
    },
    async closeTemp(){//此处为了触发 watch 钩子
      await this.$store.dispatch("SetVoteDecide", null)
      this.isShow = false
    },
    async openForm(e, data) {
      if(e == 'add'){//创建投票
        await this.$store.dispatch("SetVoteDecide", 'add')
      }else if(e == 'edit'){//编辑
        await this.$store.dispatch("SetVoteDecide", 'edit')
        await this.$store.dispatch('SetVoteType', data.vote_type == 2 ? 'second': 'first');
        await this.$store.dispatch('SetEditId',data.id);
        await this.$refs.tempForm.initList();
      }
      this.isShow = true;
    },
    handleSelectionChange(e) {
      this.multipleSelection = e;
    },
    async topStatus(e){//批量置顶，取消置顶
      if(this.multipleSelection.length == 0){
        this.$message.warning("请先选择需要调整的单元");
        return;
      }
      this.loading = true;
      let ids = this.multipleSelection.map(item =>{ return item.id }).join()
      let {data} = await vote_updateTopStatus({ ids:ids, top_status:e })
      this.loading = false;
      if (data.status === 100) {
        this.$message.success('操作成功')
        await this.initList();
      }
    },
    async upAndownPro(e) {//1 上架 0下架
      if (this.multipleSelection.length == 0) {
        this.$message.warning("请先选择需要调整的单元");
        return;
      }
      let ids = this.multipleSelection.map(item => { return item.id }).join()
      this.loading = true;
      let { data } = await vote_updateCloseStatus({ ids: ids, close_status: e });
      this.loading = false;
      if (data.status === 100) {
        await this.initList();
        this.$message.success(`${this.t_status[e].label}成功`);
      }
    },
    search() {//搜索
      let keyWords = {key: 'searchDate', names: ['create_starttime', 'create_endtime']}
      this.listQuery = searchTool(this.listQuery, keyWords);
      this.initList();
    },
    async initList() {
        this.loading = true
        const query = {...this.listQuery, company_id: localStorage.getItem('companyId') - 0}
        const { data } = await vote_list(query);
        this.loading = false
        if(data.status == 100){
          this.tableList = data.data.rows;
          this.listQuery.total = data.data.results;
          this.invote_count = data.data.invote_count;
        }
    }
  },
  created() {
    this.initList();
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
span{
  font-size: 13px;
  color: #606266;
}

.ali-edit-2 {
  cursor: pointer;
  color: #e6a23d;
}

.ali-bin {
  margin-left: 5px;
  cursor: pointer;
  color: #f56c6c;
}
.ali-zhiding{
  color: #009900;
  font-size: 20px;
}
</style>
